<template>
  <div class="ind-model-list-index sub-margin">
    <div class="header">
      <!-- <div class="sub-page-title">{{ pageTitle }}</div> -->
      <div class="table-search">
        <div class="search-left">
          <div class="search-item">
            <el-input
              placeholder="请输入内容"
              v-model="selectParams.searchContent"
              size="small"
              clearable
              @keyup.enter.native="searchData">
              <el-button slot="append" icon="el-icon-search" @click.stop="searchData"></el-button>
            </el-input>
          </div>
          <div class="search-item" v-if="isAdminRole">
            <el-select
              v-model="selectParams.status"
              filterable
              placeholder="请选择"
              size="small"
              clearable
              @change="searchData">
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </div>
        </div>
        <div class="search-right guide-step" id="guide-step-6">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-plus"
            class="guide-step-btn"
            @click="onAddEditSee"
            v-if="isAdminRole">
            新建
          </el-button>
          <el-button
            type="primary"
            size="small"
            class="guide-step-btn"
            plain=""
            @click="onExport"
            :disabled="exportBtnDisabled">
            导出
          </el-button>
        </div>
      </div>
    </div>
    <div class="main" v-if="loaded">
      <div class="table-view">
        <vxe-table
          :data="tableData"
          stripe
          border
          align="center"
          height="100%"
          auto-resize
          row-id="bulletionId"
          :checkbox-config="{ highlight: true, range: false }"
          highlight-hover-row
          @checkbox-change="onTableCheckChange"
          @checkbox-all="onTableCheckAll">
          <vxe-column type="checkbox" width="40"></vxe-column>
          <vxe-column type="seq" title="序号" width="60"></vxe-column>
          <vxe-column field="bulletinTitle" title="标题" min-width="160"></vxe-column>
          <vxe-column field="orgNames" title="通知部门"></vxe-column>
          <vxe-column field="source" title="来源"></vxe-column>
          <vxe-column field="releaseTime" title="发布时间"></vxe-column>
          <vxe-column title="发布状态">
            <template #default="{ row }">
              <span :class="[row.status == 0 ? 'ing' : 'over']">
                {{ row.status == 0 ? '暂存' : '已发布' }}
              </span>
              <span :class="[row.isTop == 1 ? 'top' : '']">
                {{ row.isTop == 1 ? ', 置顶' : '' }}
              </span>
            </template>
          </vxe-column>
          <vxe-column field="bulletinAuthor" title="发布人"></vxe-column>
          <vxe-column title="操作" :width="140" fixed="right" #default="{ row }">
            <el-tooltip class="item" effect="dark" content="查看" placement="top">
              <el-button class="btnText" type="text" icon="el-icon-view" @click="onEdit(row, 1)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="编辑" placement="top" v-if="row.status == 0 && isAdminRole">
              <el-button class="btnText" type="text" @click="onEdit(row)" icon="el-icon-edit"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top" v-if="isAdminRole">
              <el-button class="btnText" type="text" icon="el-icon-delete" @click="onDelete(row)"></el-button>
            </el-tooltip>
            <!-- <el-button type="text">置顶</el-button> -->
            <el-button class="btnText" v-show="row.isTop == 1 && isAdminRole" type="text" @click="onCancelTop(row, 0)">
              取消置顶
            </el-button>
          </vxe-column>
        </vxe-table>
      </div>
      <pagination
        v-if="!isEmpty"
        class="footer sub-margin"
        :current-page.sync="selectParams.pageNum"
        :page-size.sync="selectParams.pageSize"
        :total="totalSize"
        @currentChange="onCurrentChange" />
    </div>
  </div>
</template>

<script>
import { FILE_TYPE } from '@utility/dict'
import pagination from '@com/pagination.vue'
import { selectAllBulletin, delBulletion, canceltop, dataExport } from '@apis/notice.js'
import { mapGetters } from 'vuex'
export default {
  name: 'IndModelListIndex',
  components: { pagination },
  props: {},
  data() {
    return {
      indType: FILE_TYPE.gztz,
      createIndDialogVisible: false,
      conditions: {
        modelName: '',
        status: '',
      },
      tableData: [],
      totalSize: 0,
      loaded: false,
      yearOptions: [],
      selectParams: {
        pageNum: 1,
        pageSize: 10,
        searchContent: '',
        status: '',
        type: '0,3,4', // 类型：0为工作通知 1为暂定为公告,3工作简报
        userType: 2, // 1:管理员查看所有；2：普通用户登录-查看自己能看到的
      },
      statusOptions: [
        {
          label: '全部',
          value: '',
        },
        {
          label: '已发布',
          value: '1',
        },
        {
          label: '未发布',
          value: '0',
        },
      ],
      checkResult: [],
      isImport: false,
      importTimeout: null,
    }
  },
  computed: {
    ...mapGetters('role', ['isOtherRole', 'isNormalRole', 'isAdminRole', 'isMainRole', 'isOrgRole', 'isPartRole']),
    isGztz() {
      return this.indType === FILE_TYPE.gztz
    },
    pageTitle() {
      if (this.isGztz) {
        return '工作通知'
      } else {
        return '制度文件'
      }
    },
    isEmpty() {
      return this.totalSize === 0 && this.conditions.modelName === '' && this.conditions.status === ''
    },
    exportBtnDisabled() {
      return !(this.checkResult.length > 0) || this.isImport
    },
  },
  watch: {
    $route() {
      this.initIndType()
    },
  },
  created() {
    this.initIndType()
  },
  mounted() {},
  methods: {
    initIndType() {
      // 使用固定值
      const { name } = this.$route
      if (name === 'PSKH_WORK_NOTICE') {
        this.indType = FILE_TYPE.gztz
      } else {
        this.indType = FILE_TYPE.zdwj
      }
      this.selectParams.type = this.indType
      if (this.isAdminRole) {
        this.selectParams.userType = '1'
      }
      this.listIndModels()
    },
    showCreateDialog() {
      this.createIndDialogVisible = true
    },
    listIndModels() {
      this.tableData = []
      this.loaded = false
      selectAllBulletin({ ...this.selectParams })
        .then(res => {
          this.loaded = true
          if (res.status === 200) {
            const data = res.data
            this.tableData = data.content
            this.totalSize = data.totalSize
          }
        })
        .catch(() => {
          this.loaded = true
        })
    },
    onCurrentChange() {
      this.listIndModels()
    },
    onEdit(row, type) {
      sessionStorage.removeItem('noticePreviewData')
      if (type === 1) {
        this.$router.push({
          name: 'PSKH_SYSTEM_FILE_DETAIL',
          params: { id: row.bulletionId, type: this.indType },
        })
      } else {
        this.$router.push({
          name: 'PSKH_SYSTEM_FILE_ADD',
          params: { id: row.bulletionId, type: this.indType },
        })
      }
    },
    onDelete(row) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          delBulletion({
            bulletionId: row.bulletionId,
          }).then(res => {
            if (res.status === 200) {
              this.$message.success(res.message)
              this.listIndModels()
            }
          })
        })
        .catch(() => {})
    },
    searchData() {
      this.selectParams.pageNum = 1
      this.listIndModels()
    },
    onAddEditSee() {
      sessionStorage.removeItem('noticePreviewData')
      this.$router.push({
        name: 'PSKH_SYSTEM_FILE_ADD',
        params: { type: this.indType },
      })
    },
    onExport() {
      const checkResultStr = this.checkResult.join(',')
      const req = `?bulletionId=${checkResultStr}`
      const link = document.createElement('a')
      link.href = dataExport(req)
      link.target = 'targetName'
      link.click()
      this.isImport = true
      clearTimeout(this.importTimeout)
      this.importTimeout = setTimeout(() => {
        this.isImport = false
      }, 60000)
    },
    /* 取消置顶 */
    onCancelTop(row, isTop) {
      this.$confirm('确定取消置顶?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          canceltop({
            bulletionId: row.bulletionId,
            isTop: isTop,
          }).then(res => {
            if (res.status === 200) {
              this.$message.success(res.message)
              this.listIndModels()
            }
          })
        })
        .catch(() => {})
    },
    /* 监听CheckBox变化 */
    onTableCheckChange(e) {
      // console.log(e);
      const rowid = e.rowid
      if (e.checked) {
        this.checkResult.push(rowid)
        this.checkResult = [...new Set(this.checkResult)]
      } else {
        this.checkResult = this.checkResult.filter(item => item !== rowid)
      }
    },
    /* 监听CheckBox全选变化 */
    onTableCheckAll(e) {
      const records = e.records
      if (records.length > 0) {
        this.checkResult = [...new Set(records.map(item => item.bulletionId))]
      } else {
        this.checkResult = []
      }
      // console.log(this.checkResult)
    },
  },
  destroyed() {
    clearTimeout(this.importTimeout)
  },
}
</script>
<style lang="scss" scoped>
@import '@styles/layout.scss';

.ind-model-list-index {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  padding-bottom: 20px;
  .header {
    .table-search {
      margin: 10px 0;
      display: flex;
      justify-content: space-between;
      .search-left {
        width: 100%;
        display: flex;
        align-items: center;
        .search-item + .search-item {
          margin-left: 20px;
        }
      }
      .search-right {
        flex: 1;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
  }

  .main {
    flex: 1;
    overflow: hidden;
    // text-align: center;
    display: flex;
    flex-direction: column;

    .table-view {
      flex: 1;
      overflow: hidden;
      ::v-deep .el-button {
        .el-icon-delete {
          color: #f56c6c;
        }
      }
      .ing {
        color: #1852a3;
      }

      .over {
        color: #2d941b;
      }
      .top {
        color: #950002;
      }
    }

    .footer {
      padding: 0 4px;
      margin-top: 15px;
    }
  }
}
</style>
